<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" href="./css/reset.css">
	<link rel="stylesheet" href="./css/register.css">
	<link rel="icon" href="./icon/title_vagetable.png">
	<title>注册页面</title>
	<script src="./js/axios.min.js"></script>
	<script src="./js/axios.config.js"></script>
</head>

<body>
	<div class="icon">
		<img src="./img/login/logo.png" alt="">
	</div>
	<div class="infomation">
		<form action="">
			<input id="username" class="input"  data-error="用户名至少3个字符！" placeholder="请输入用户名" type="text">
			<div class="sex">
				<span>性别:</span>
				<label><input type="radio" name="sex" value="男" checked><span class="sexDetail">男</span></label>
				<label><input type="radio" name="sex" value="女"><span class="sexDetail">女</span></label>
			</div>
			<input id="password" class="input" data-error ="密码至少3个数字！" placeholder="密码" type="password">
			<input id="password_again" class="input" data-error="两次密码不一致！" placeholder="请再次输入密码" type="password">
			<div class="photoNumber">
				<select name="photoNumber">
					<option>+86</option>
				</select>
				<input id="photoNumber" class="input" data-error="手机号码格式不对！" placeholder="手机号码" type="password">
			</div>
			<div class="verify">
				<input id="check_num" class="input" data-error="验证码错误" placeholder="验证码" type="text">
				<div class="button">获取验证码</div>
			</div>
			<button id="btn" type="button">注册</button>
		</form>
	</div>
	<div class="agreement">注册即代表同意《本家网络服务协议》</div>
	<script>
		// 获取元素
		let oUsername = document.querySelector('#username')
		let oRadio = document.getElementsByName("sex")
		let oPassword = document.querySelector('#password')
		let oPassword_again = document.querySelector('#password_again')
		let oPhotoNumber = document.querySelector('#photoNumber')
		let oCheck_num = document.querySelector('#check_num')
		let oBtn = document.querySelector('#btn')


		// 验证函数
		function check() {
			// 获取value值
			let value = this.value
			// 默认验证布尔值为true
			let valueValid = true

			// 如果为用户名框
			if (this.id === 'username') {
				valueValid = /\w{3,}/.test(value)
			}

			// 如果为密码框
			if (this.id === 'password') {
				valueValid = /\d{3,}/.test(value)
			}

			// 如果为二次密码框
			if (this.id === 'password_again') {
				valueValid = this.value === oPassword.value
			}

			// 如果为电话号码框
			if (this.id === 'photoNumber') {
				valueValid = /^1((70)|(3|5|8){1}\d{1})\d{8}/.test(value)
			}

			// 如果为验证码框
			if (this.id === 'check_num') {
				valueValid = /\d{4}/.test(value)
			}

			// 改变文本框提示用户
			valueValid ? this.style.borderColor = 'green' : (this.style.borderColor = '#c55a5c',alert(this.dataset.error))

			// 校验标记
			this.validate = valueValid
		}

		// 绑定事件
		oUsername.addEventListener('change', check)
		oPassword.addEventListener('change', check)
		oPassword_again.addEventListener('change', check)
		oPhotoNumber.addEventListener('change', check)
		oCheck_num.addEventListener('change', check)

		// 提交表单
		oBtn.addEventListener('click', function () {
			let username = oUsername.value
			let sex
			for (i = 0; i < oRadio.length; i++) {
				if (oRadio[i].checked) {
					sex = oRadio[i].value
				}
			}
			let password = oPassword.value
			let photoNumber = oPhotoNumber.value

			// 校验所有表单
			let all_valid = oUsername.validate && oPassword.validate  && oPassword_again.validate && oPhotoNumber.validate && oCheck_num.validate
			if (!all_valid) {
				alert('表单校验失败，请重新填写！')
				return
			}
			axios.post('user/register',{
				username: username,
				password: password,
				sex: sex,
				tel: photoNumber
			}).then((res)=>{
				if(res.status){
					alert('注册成功')
					// 跳转登录页面
					location.assign('./login.html')
				}
				else{
					alert(res.msg)
				}
			})
			
		}) 
	</script>
</body>

</html>